<pagination
  :msgs="msgs"
  :page-idx="pageIdx",
  :quantity="quantity"
  :fetch-msg="fetchMsg">
</pagination>

<notice-bar
  v-show="!msgs.length">
</notice-bar>

<!-- 下面的quantity需要sync同步 -->
<display-control
  :msgs="msgs"
  :page-idx="pageIdx"
  :quantity.sync="quantity"
  :fetch-msg="fetchMsg">
</display-control>

<ul class="list-group">
  <!-- track-by指令可提高复用率 http://cn.vuejs.org/guide/list.html#track-by -->
  <li class="list-group-item" v-for="msg in msgs" track-by="id">
    <!-- 这里加@click.stop主要是因为会莫名报错，可能是因为使用了BootStrap的缘故 -->
    <!-- 错误详情：Uncaught TypeError: a.getAttribute is not a function  jquery.min.js:2-->
    <a @click.stop
      v-link="{ name: 'detailMsg', params: { msgId: msg.id } }">
      <b>{{ msg.title }}</b>
    </a>

    <span class="badge">
      {{ msg.time | dateTimeFormatter 3 }}
    </span>

    <br/>
    
    <span class="text-muted">by</span>
    
    <a @click.stop
      v-link="{ path: '/msg', query: { author: msg.author } }">
      <i>{{ msg.author }}</i>
    </a>

    <!--
      传入索引$index以便于随后的删除操作
      若不传入$index则不能使用便捷的$remove函数
      只能使用filter来剔除被删除的msg
      详情http://cn.vuejs.org/api/#array-remove-reference
    -->
    <opt-btn-group
      :msg="msg"
      :index="$index"
      parent-name="MsgList">
      <a slot="detailMsgBtn"
        class="btn btn-info"
        v-link="{ name: 'detailMsg', params: { msgId: msg.id } }"
        @click.stop>
        查看详情
      </a>
    </opt-btn-group>
  </li>
</ul>
